
<meta charset="UTF-8">

<div id="addgroup">
    <div class="full">
        <h3 class="h3-title">{{$t("bgMgr.addGroup")}}</h3>
        <div>

            <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("group.groupName")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim="groupname"></i-input>
                    </i-col>
                    <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                        <span>
                            <Icon type="star"></Icon> {{$t("group.groupNameTip")}} 
                        </span>
                    </i-col>
            </Row>

            <Row style="margin: 10px 0">   
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("group.mintime")}}  : &nbsp;</i-col>
                    <i-col span="8">
                        <input-number :max="3600" :min="30" :step="30" v-model="mintime" style="width: 210px;"></input-number>&nbsp;s
                    </i-col>
                    <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                        <span>
                            <Icon type="star"></Icon> {{$t("group.mintimeTip")}}  
                        </span>
                    </i-col>
            </Row>

            <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2"><i style="color: red;display: inline-block;">*</i>&nbsp;{{$t("group.maxtime")}}  : &nbsp;</i-col>
                    <i-col span="8">
                        <input-number :max="3600" :min="30" :step="30" v-model="maxtime" style="width: 210px;"></input-number>&nbsp;s
                    </i-col>
                    <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                        <span>
                            <Icon type="star"></Icon> {{$t("group.maxtimeTip")}}  
                        </span>
                    </i-col>
            </Row>


            <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2">{{$t("group.userCount")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim.number="usercount"></i-input>
                    </i-col>
                    <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                        <span>
                            <Icon type="star"></Icon> {{$t("group.userCountTip")}}
                        </span>
                    </i-col>
            </Row>

            <Row style="margin: 10px 0">
                    <i-col span="4" style="height: 100%;text-align:right;line-height:32px;" :offset="2">{{$t("group.devCount")}} : &nbsp;</i-col>
                    <i-col span="8">
                        <i-input v-model.trim.number="devicecount"></i-input>
                    </i-col>
                    <i-col span="10" style="height: 100%;line-height:32px;padding-left:20px;">
                        <span>
                            <Icon type="star"></Icon> {{$t("group.devCountTip")}}
                        </span>
                    </i-col>
            </Row>

            <Row style="margin: 10px 0">
                    <i-col span="6" :offset="6">
                        <i-button style="width: 100%" @click="handleSubmit">{{$t("bgMgr.submit")}}</i-button>
                    </i-col>
                    <i-col span="6" :offset="1">
                        <i-button style="width: 100%" @click="resetInfo">{{$t("bgMgr.reset")}}</i-button>
                    </i-col>
            </Row>
        </div>
    </div>

    <script>
        new Vue({
            el:"#addgroup",
            i18n: utils.getI18n(),
            data:{
                groupname:"",
                mintime:30,
                maxtime:3600,
                usercount:"",
                devicecount:"",
                groupname:"",
            },
            methods:{
                handleSubmit:function(){
                    if(this.groupname == ""){
                        this.$Message.error(this.$t("message.fillGroupNameTip"));
                        return;
                    };
                    var url = myUrls.addGroup();
                    var data = {
                        groupname:this.groupname,
                        mintime:this.mintime,
                        maxtime:this.maxtime,
                        groupname:this.groupname,
                    };
                    if(this.usercount == ""){
                        data.usercount = 0;
                    }else{
                        data.usercount = this.usercount;
                    }
                    if(this.devicecount == ""){
                        data.devicecount = 0;
                    }else{
                        data.devicecount = this.devicecount;
                    }
                    utils.sendAjax(url,data,this.doAddcallback);
                },
                doAddcallback:function(resp){
                    if(resp.status == 0){
                        this.$Message.success(this.$t("message.addSucc"));
                    }else{
                        this.$Message.error(resp.cause);
                    }
                },
                resetInfo:function(){
                    this.groupname = "";
                    this.mintime = 30;
                    this.maxtime = 3600;
                    this.usercount = "";
                    this.devicecount = "";
                    this.groupname = "";
                },
            
            },
            mounted:function(){
               
            }
        })
    </script>
</div>




